<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <title>个人信息</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script type="text/javascript" src="birthday.js"></script>
</head>
<style>
    .read-line{
        width: auto;
        height: 5px;
        border-bottom: 3px solid #ed0a75
    }
    .center {
        width: 1550px;
        margin: 0 auto
    }
    header a {
        margin: 10px;
        text-decoration: none;
        font-size: 16px;
        color: black;
    }
    #d1{/*我的大麦-字体样式*/
        padding-left: 11px;
        line-height: 30px;
        border-radius: 10px;
        background-color: #ed0a75;color: #fff;
    }
    .footer_links {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 36px 0;
        text-align: center;
        zoom: 1;
    }

    li, ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .footer_links_list {
        float: left;
        font-size: 13px;
        margin-left: 10px;
        margin-right: 10px;
        color: #111;
    }

    footer a {
        text-decoration: none;
        color: black;
    }

    .footer_r_1 {
        zoom: 1;
        padding-bottom: 10px;
    }

    .footer_r_1_a {
        float: left;
        display: block;
        width: 98px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        background-color: #ff1268;
        color: #fff;
        font-size: 14px;
        border-radius: 20px;
    }

    .footer_r_words {
        padding-bottom: 6px;
    }

    .footer_r_words_word {
        float: left;
        font-size: 13px;
        color: #111;

    }

    .footer_r_words_line {
        float: left;
        padding: 0 15px;
    }
</style>
<body>
<div id="app">
    <el-container>
        <el-header height="72px" style="border: 1px solid #f4f4f4">
            <div class="center" >
                <el-row gutter="20">
                    <el-col span="2">
                        <img src="imgs/首页log1.jpg" style="width: 92px ;height:41px ;margin-top: 20px ;float: left" >
                    </el-col>
                    <el-col span="4">
                        <i class="el-icon-location-outline"></i>
                        合肥
                        <i class="i-arrow-location"></i>
                    </el-col>
                    <el-col span="6">
                        <a href="Index.html">首页</a>
                        <a href="">分类</a>
                    </el-col>
                    <el-col span="8">
                        <input class="input-search" placeholder="搜索明星、演出">
                        <button class="button-search">搜索</button>
                    </el-col>
                    <el-col span="2" style="margin-bottom: 20px">
                        <el-popover placement="top-start" trigger="hover">
                            <div slot="reference">
                                <i style="font-size: 30px; position:relative;top: 20px"
                                   class="el-icon-user"></i>
                            </div>
                            <el-menu @select="handleSelect">
                                <el-menu-item index="2">
                                    <a>个人信息</a><br>
                                </el-menu-item>
                                <hr>
                                <el-menu-item index="3">
                                    <a>账号设置</a><br>
                                </el-menu-item>
                                <hr>
                                <el-menu-item index="1">
                                    <a>订单管理</a><br>
                                </el-menu-item>
                                <hr>
                                <el-menu-item>
                                    <a href="login.html" style="text-decoration: none">退出登录</a><br>
                                </el-menu-item>
                            </el-menu>
                        </el-popover>
                    </el-col>
                    <el-col span="2" style="margin-bottom: 20px">
                        <el-popover placement="top-start" trigger="hover">
                            <div slot="reference">
                                <i style="font-size: 30px; position:relative;top: 20px"
                                   class="el-icon-mobilephone"></i>
                                下载</div>
                            <img src="imgs/二维码.jpg" width="50px" height="50px">
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <div class="read-line"></div>

        <el-container class="center">
            <!--导航菜单开始-->
            <el-aside>
                <el-menu @select="handleSelect" default-active="1" style="height: 560px;margin: 0;padding-top: 30px"
                         active-text-color="orange">
                    <p id="d1" style="margin-right: 10px;">我的大麦</p>
                    <el-menu-item-group><!--分组-->
                        <template><b>交易中心</b></template>
                        <el-menu-item index="1">
                            <i class="el-icon-arrow-right">订单管理</i>
                        </el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template><b>账户中心</b></template>
                        <el-menu-item index="2">
                            <i class="el-icon-arrow-right">个人信息</i>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-arrow-right">账号设置</i>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-menu>
            </el-aside>
            <!--导航菜单结束-->
            <el-main style="padding: 0">
                <!--订单管理开始-->
                <el-card v-if="currentIndex==1">
                    <el-tabs type="border-card" style="margin: 0">
                    <el-form>
                        <el-input style="width: 1065px;" disabled placeholder="订单管理" ></el-input>
                    </el-form>
                    <el-form>
                        <div style="width: 150px;border-radius: 10px;margin: 25px 0 0 0;  background-color: #ed0a75;
                            padding-left: 11px;line-height: 30px;color: #fff;" disabled>订单管理</div>
                        <div class="read-line" style="margin: 0 0 25px 0;"></div>
                    </el-form>
                    <!--订单管理表格开始-->
                    <el-table  :data="userArr">
                        <el-table-column prop="projectName" label="项目名称"></el-table-column>
                        <el-table-column prop="ticketCount" label="票品张数"></el-table-column>
                        <el-table-column prop="orderAmount" label="订单金额"></el-table-column>
                        <el-table-column prop="orderNumber" label="订单编号"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间"></el-table-column>
                        <el-table-column align="center" fixed="right" label="订单信息">
                            <template slot-scope="scope">
                                <el-button type="danger" size="mini"><a style="text-decoration: none;font-size: 14px;color: white;" href="">详情</a></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--订单管理表格结束-->
                    </el-tabs>
                </el-card>
                <!--订单管理结束-->

                <!--个人信息开始-->
                <el-card  v-if="currentIndex==2">
                    <el-tabs type="border-card" style="margin: 0">
                    <el-form label-width="100px">
                        <el-form>
                            <el-input style="width: 1065px;" disabled placeholder="个人信息" ></el-input>
                        </el-form>
                        <el-form>
                            <div style="width: 150px;border-radius: 10px;margin: 25px 0 0 0;  background-color: #ed0a75;
                            padding-left: 11px;line-height: 30px;position: relative;color: #fff;" disabled>基本资料</div>
                            <div class="read-line" style="margin: 0 0 25px 0;"></div>
                        </el-form>
                        <div style="margin: 2px 0 15px 0;background: #fffdee;border: 1px solid #edd28b;padding:10px 2px 5px 2px;color: #999;width: 700px;height:30px;text-align: center;">
                                完善更多个人信息，有助于我们为您提供更加个性化的服务，大麦网将尊重并保护您的隐私。
                        </div>
                        <el-form-item label="*昵称：">
                            <el-input style="width: 200px" placeholder="请输入昵称" v-model="user_info.nickName"></el-input>
                        </el-form-item>
                        <el-form-item label="真实姓名：">
                            <el-input style="width: 200px" disabled v-model="user_info.name"></el-input>
                        </el-form-item>

                        <!--性别 gender 开始-->
                            <div style="color: #606266;font-size: 14px;margin-left: 46px;margin-bottom: 20px;  ">
                                性别：<el-radio v-model="user_info.gender" style="margin-left: 17px" label="男"></el-radio>
                                     <el-radio v-model="user_info.gender" label="女"></el-radio>
                            </div>
                        <!--性别 gender 结束-->

                        <!--出生日期date 开始-->
                        <div style="color: #606266;font-size: 13px;position: relative">
                            <p style="margin-left: 24px;">出生日期：
                                <el-date-picker
                                        style="margin-left: 8px;width:200px ;padding-bottom: 7px"
                                        v-model="user_info.date"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日">
                                </el-date-picker>
                            </p>
                        </div>

                        <el-form-item label="身份证号：">
                            <el-input maxlength="18" show-word-limit style="width: 205px" placeholder="请输入身份证号" v-model="user_info.id"></el-input>
                        </el-form-item>
                        <el-form-item label="收货地址：">
                            <el-input style="width: 200px" placeholder="请输入收货地址" v-model="user_info.address"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="danger" @click="onSubmit">保存</el-button>
                        </el-form-item>
                    </el-form>
                    </el-tabs>
                </el-card>
                <!--个人信息结束-->

                <!--账号设置开始-->
                <el-card  v-if="currentIndex==3">
                    <el-tabs type="border-card" style="width: 1200px;height: 630px">
                    <el-form>
                        <el-input style="width: 1065px;" disabled placeholder="账号设置"></el-input>
                    </el-form>
                    <el-form>
                        <div style="width: 150px;border-radius: 10px;margin: 25px 0 0 0;  background-color: #ed0a75;
                            padding-left: 11px;line-height: 30px;color: #fff;" disabled>账号设置</div>
                        <div class="read-line" style="margin: 0 0 25px 0;"></div>
                    </el-form>
                    <!--个人密码开始-->
                    <el-card style="width: 1065px">
                        <div style="margin: 0 15px; padding: 0">
                            <i class=" el-icon-d-arrow-right" style="float:left;font-size: 16px">个人密码</i>
                            <p class="el-icon-key"  style="float: right;font-size: 16px;"><a style="text-decoration: none;" href="updatePW.html">修改</a></p>
                        </div>
                    </el-card>
                    <!--个人密码结束-->
                    </el-tabs>
                </el-card>
                <!--账号设置结束-->

            </el-main>
        </el-container>
        <my-footer></my-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/my-header.js"></script><!--引入js文件(重复代码)-->
<script src="js/my-footer.js"></script><!--引入js文件(重复代码)-->

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex:"2" ,    /*默认值为1*/
                labelPosition: 'right',
                user_info:
                    {
                        nickName: '诚意',
                        name: '王成义',
                        gender: '男',
                        date: '1997/08/07',
                        id: '340122000000000000',
                        address: '合肥'
                    },
                userArr:[
                    {
                        "projectName":"张杰全球演唱会张杰全球演唱会张杰全球演唱会张杰全球演唱会张杰全球演唱会张杰全球演唱会张杰全球演唱会张杰全球演唱会",
                        "ticketCount": 200,
                        "orderAmount": 688,
                        "orderNumber": "001",
                        "createTime":"2023/5/27 14:00:20"
                    },
                    {
                        "projectName":"张杰全球演唱会",
                        "ticketCount": 200,
                        "orderAmount": 688,
                        "orderNumber": "001",
                        "createTime":"2023/5/27 14:00:20"
                    },
                    {
                        "projectName":"张杰全球演唱会",
                        "ticketCount": 200,
                        "orderAmount": 688,
                        "orderNumber": "001",
                        "createTime":"2023/5/27 14:00:20"
                    },
                    {
                        "projectName":"张杰全球演唱会",
                        "ticketCount": 200,
                        "orderAmount": 688,
                        "orderNumber": "001",
                        "createTime":"2023/5/27 14:00:20"
                    },
                    {
                        "projectName":"张杰全球演唱会",
                        "ticketCount": 200,
                        "orderAmount": 688,
                        "orderNumber": "001",
                        "createTime":"2023/5/27 14:00:20"
                    },
                    {
                        "projectName":"张杰全球演唱会",
                        "ticketCount": 200,
                        "orderAmount": 688,
                        "orderNumber": "001",
                        "createTime":"2023/5/27 14:00:20"
                    },
                    {
                        "projectName":"张杰全球演唱会",
                        "ticketCount": 200,
                        "orderAmount": 688,
                        "orderNumber": "001",
                        "createTime":"2023/5/27 14:00:20"
                    },
                    {
                        "projectName":"张杰全球演唱会",
                        "ticketCount": 200,
                        "orderAmount": 688,
                        "orderNumber": "001",
                        "createTime":"2023/5/27 14:00:20"
                    }
                ],

            }
        },

        methods: {
            handleSelect(key,keyPath){
                //key就是点击菜单项的index值
                v.currentIndex=key;
            },
            onSubmit() {
                console.log('submit!');
                // //u代表的是需要修改的用户数据
                // let u = {id:v.user.id,nickName:v.user.nickName};
                // //发请求修改
                // axios.post("/v1/users/update",u).then(function (response) {
                //     if (response.data.code==1){
                //         //更新localStorage里面的用户信息
                //         localStorage.user = JSON.stringify(v.user);
                //         //刷新页面
                //         location.reload();
                //     }
                // })
            }

        },

    })
</script>
</html>